<!DOCTYPE html>
<html>
  <head>
    <title>jQuery MessageBar</title>
    <link href="pretend-this-is-bootstrap.css" rel="stylesheet">
    <link href="../dist/jquery.messagebar.min.css" rel="stylesheet">
  </head>
  <body>

    <div class="messagebar messagebar-default" id="mynotification">
      <div class="container">
        This is a default notification. You can click it away if you want. It should slide instead of instantly disappear.
        <button type="button" class="close" data-dismiss="message">&times;</button>
      </div>
    </div>

    <div class="messagebar messagebar-primary" id="mynotification2">
      <div class="container">
        This is a primary notification. You can click it away if you want. It should slide instead of instantly disappear.
        <button type="button" class="close" data-dismiss="message">&times;</button>
      </div>
    </div>

    <div class="messagebar messagebar-success" id="mynotification3">
      <div class="container">
        This is a success notification. You can click it away if you want. It should slide instead of instantly disappear.
        <button type="button" class="close" data-dismiss="message">&times;</button>
      </div>
    </div>

    <div class="messagebar messagebar-info" id="mynotification4">
      <div class="container">
        This is an info notification. You can click it away if you want. It should fade out.
        <button type="button" class="close" data-dismiss="message">&times;</button>
      </div>
    </div>

    <div class="messagebar messagebar-warning" id="mynotification5">
      <div class="container">
        This is a warning notification. You can click it away if you want.
        <button type="button" class="close" data-dismiss="message">&times;</button>
      </div>
    </div>

    <div class="messagebar messagebar-danger" id="mynotification6">
      <div class="container">
        This is a danger notification. You can click it away if you want.
        <button type="button" class="close" data-dismiss="message">&times;</button>
      </div>
    </div>

    <div class="messagebar messagebar-default" id="mynotification7">
      <div class="container">
        This is a default notification. It should automatically closed after 7 sec otherwise you can click it away if you want.
        <button type="button" class="close" data-dismiss="message">&times;</button>
      </div>
    </div>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    <script src="../dist/jquery.messagebar.js"></script>
    <script>
      $(function() {
        $("#mynotification").messageBar({
          slide: true
        });
        $("#mynotification2").messageBar({
          slide: true
        });
        $("#mynotification3").messageBar({
          slide: true
        });
        $("#mynotification4").messageBar({
          fade: true
        });
        $("#mynotification5").messageBar({
          // Default behaviour.
        });
        $("#mynotification6").messageBar({
          // Default behaviour.
        });
        $("#mynotification7").messageBar({
          autoclose: 7000,  // Auto close after 7 sec.
          slide: true
        });
      });
    </script>
  </body>
</html>